<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>ECMAScript6 | 浪飞IT小栈</title>
    <meta name="generator" content="VuePress 1.9.9">
    <link rel="icon" href="/img/favicon.ico">
    <meta name="description" content="前后端技术分享">
    <meta name="keywords" content="前端博客,后端博客,人工智能,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown,java,Spring,Springboot,Redis,mysql">
    <meta name="baidu-site-verification" content="7F55weZDDc">
    <meta name="theme-color" content="#11a8cd">
    
    <link rel="preload" href="/assets/css/0.styles.ada71c49.css" as="style"><link rel="preload" href="/assets/js/app.a2a00aa5.js" as="script"><link rel="preload" href="/assets/js/2.256f807a.js" as="script"><link rel="preload" href="/assets/js/54.dab741c7.js" as="script"><link rel="prefetch" href="/assets/js/10.ab144fe3.js"><link rel="prefetch" href="/assets/js/11.062e0879.js"><link rel="prefetch" href="/assets/js/12.f9c60882.js"><link rel="prefetch" href="/assets/js/13.0a6ebfcf.js"><link rel="prefetch" href="/assets/js/14.03fc6f12.js"><link rel="prefetch" href="/assets/js/15.19dbf9fd.js"><link rel="prefetch" href="/assets/js/16.6e68160b.js"><link rel="prefetch" href="/assets/js/17.1d678834.js"><link rel="prefetch" href="/assets/js/18.4536fd5c.js"><link rel="prefetch" href="/assets/js/19.9c1b65df.js"><link rel="prefetch" href="/assets/js/20.c5f96e71.js"><link rel="prefetch" href="/assets/js/21.3f0b334e.js"><link rel="prefetch" href="/assets/js/22.55c868be.js"><link rel="prefetch" href="/assets/js/23.91286241.js"><link rel="prefetch" href="/assets/js/24.c1af1909.js"><link rel="prefetch" href="/assets/js/25.a995a755.js"><link rel="prefetch" href="/assets/js/26.abc5dea3.js"><link rel="prefetch" href="/assets/js/27.1eb62850.js"><link rel="prefetch" href="/assets/js/28.b383a871.js"><link rel="prefetch" href="/assets/js/29.088e0d73.js"><link rel="prefetch" href="/assets/js/3.cd716564.js"><link rel="prefetch" href="/assets/js/30.3ccc98d5.js"><link rel="prefetch" href="/assets/js/31.aab7cc23.js"><link rel="prefetch" href="/assets/js/32.5e16b7e6.js"><link rel="prefetch" href="/assets/js/33.4aaeb741.js"><link rel="prefetch" href="/assets/js/34.45e8e898.js"><link rel="prefetch" href="/assets/js/35.5899c97a.js"><link rel="prefetch" href="/assets/js/36.32e2e263.js"><link rel="prefetch" href="/assets/js/37.c4e27bbd.js"><link rel="prefetch" href="/assets/js/38.fe5e60d2.js"><link rel="prefetch" href="/assets/js/39.2cb0b4ee.js"><link rel="prefetch" href="/assets/js/4.edf4d5e7.js"><link rel="prefetch" href="/assets/js/40.08d5bead.js"><link rel="prefetch" href="/assets/js/41.2f80f24b.js"><link rel="prefetch" href="/assets/js/42.43a49913.js"><link rel="prefetch" href="/assets/js/43.08da7ec2.js"><link rel="prefetch" href="/assets/js/44.7c7cb8a9.js"><link rel="prefetch" href="/assets/js/45.0ddf7e7f.js"><link rel="prefetch" href="/assets/js/46.7c4609a5.js"><link rel="prefetch" href="/assets/js/47.edf3ddf8.js"><link rel="prefetch" href="/assets/js/48.569a90b9.js"><link rel="prefetch" href="/assets/js/49.fa368ac8.js"><link rel="prefetch" href="/assets/js/5.24054156.js"><link rel="prefetch" href="/assets/js/50.b9b3ea7f.js"><link rel="prefetch" href="/assets/js/51.a2ebf0fe.js"><link rel="prefetch" href="/assets/js/52.31f02238.js"><link rel="prefetch" href="/assets/js/53.4110ef1e.js"><link rel="prefetch" href="/assets/js/55.f27984e9.js"><link rel="prefetch" href="/assets/js/56.bd4c1a8e.js"><link rel="prefetch" href="/assets/js/57.375d40cb.js"><link rel="prefetch" href="/assets/js/58.932e3864.js"><link rel="prefetch" href="/assets/js/59.e657be1b.js"><link rel="prefetch" href="/assets/js/6.b259c061.js"><link rel="prefetch" href="/assets/js/60.88d94274.js"><link rel="prefetch" href="/assets/js/61.fa71d884.js"><link rel="prefetch" href="/assets/js/62.a9d3b3b7.js"><link rel="prefetch" href="/assets/js/63.f849fe75.js"><link rel="prefetch" href="/assets/js/64.1770f7a9.js"><link rel="prefetch" href="/assets/js/65.6afc33db.js"><link rel="prefetch" href="/assets/js/66.799f2eb4.js"><link rel="prefetch" href="/assets/js/67.f36b2f7d.js"><link rel="prefetch" href="/assets/js/68.868cd00b.js"><link rel="prefetch" href="/assets/js/69.4c29b907.js"><link rel="prefetch" href="/assets/js/7.e34ea00f.js"><link rel="prefetch" href="/assets/js/70.1b993ed4.js"><link rel="prefetch" href="/assets/js/71.e16ad4f9.js"><link rel="prefetch" href="/assets/js/72.627505e6.js"><link rel="prefetch" href="/assets/js/73.32768e14.js"><link rel="prefetch" href="/assets/js/74.968a580d.js"><link rel="prefetch" href="/assets/js/75.42d5af3d.js"><link rel="prefetch" href="/assets/js/76.19a69d31.js"><link rel="prefetch" href="/assets/js/77.cf627a78.js"><link rel="prefetch" href="/assets/js/78.07177880.js"><link rel="prefetch" href="/assets/js/8.c4dd00ce.js"><link rel="prefetch" href="/assets/js/9.0ff73be2.js">
    <link rel="stylesheet" href="/assets/css/0.styles.ada71c49.css">
  </head>
  <body class="theme-mode-light">
    <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/img/logo.png" alt="浪飞IT小栈" class="logo"> <span class="site-name can-hide">浪飞IT小栈</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><a href="/pages/6138ae/" class="nav-link">Java速通</a></div><div class="nav-item"><a href="/pages/705b35/" class="nav-link">面试经典</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="精品项目" class="dropdown-title"><a href="/project/" class="link-title">精品项目</a> <span class="title" style="display:none;">精品项目</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>桌面端</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/pages/8143cc480faf9a11/" class="nav-link">JavaScript</a></li></ul></li><li class="dropdown-item"><h4>PC后端</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/note/javascript/" class="nav-link">项目1</a></li><li class="dropdown-subitem"><a href="/note/typescript-axios/" class="nav-link">项目二</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/about/" class="nav-link">电子书</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div><div class="nav-item"><a href="/pages/0c07b2/" class="nav-link">IT杂货铺</a></div><div class="nav-item"><a href="/archives/" class="nav-link">更多资源</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><div class="blogger"><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/avatar.jpg"> <div class="blogger-info"><h3>浪飞yes</h3> <span>无法简单的人儿~</span></div></div> <nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><a href="/pages/6138ae/" class="nav-link">Java速通</a></div><div class="nav-item"><a href="/pages/705b35/" class="nav-link">面试经典</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="精品项目" class="dropdown-title"><a href="/project/" class="link-title">精品项目</a> <span class="title" style="display:none;">精品项目</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>桌面端</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/pages/8143cc480faf9a11/" class="nav-link">JavaScript</a></li></ul></li><li class="dropdown-item"><h4>PC后端</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/note/javascript/" class="nav-link">项目1</a></li><li class="dropdown-subitem"><a href="/note/typescript-axios/" class="nav-link">项目二</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/about/" class="nav-link">电子书</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div><div class="nav-item"><a href="/pages/0c07b2/" class="nav-link">IT杂货铺</a></div><div class="nav-item"><a href="/archives/" class="nav-link">更多资源</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>开篇</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>基础语法</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>面向对象</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>常用类</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>基础高级</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>数据库</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>前端技术</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>热门框架</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>前后端分离</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/pages/9234b6/" aria-current="page" class="active sidebar-link">ECMAScript6</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/pages/9234b6/#一、进入学习内容与目标" class="sidebar-link">一、进入学习内容与目标</a></li><li class="sidebar-sub-header level2"><a href="/pages/9234b6/#二、javascript介绍" class="sidebar-link">二、JavaScript介绍</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/9234b6/#_2-1-简介" class="sidebar-link">2.1 简介</a></li><li class="sidebar-sub-header level3"><a href="/pages/9234b6/#_2-2-编写位置" class="sidebar-link">2.2 编写位置</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_2-2-1-编写在script-标签中" class="sidebar-link">2.2.1 编写在script 标签中</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_2-2-2-编写在-js-文件中" class="sidebar-link">2.2.2 编写在 JS 文件中</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/9234b6/#三、es6核心语法" class="sidebar-link">三、ES6核心语法</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/9234b6/#_3-1-变量和常量" class="sidebar-link">3.1 变量和常量</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_3-1-1-数据类型" class="sidebar-link">3.1.1 数据类型</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_3-1-2-let" class="sidebar-link">3.1.2 let</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_3-1-3-const" class="sidebar-link">3.1.3 const</a></li><li class="sidebar-sub-header level3"><a href="/pages/9234b6/#_3-2-运算符" class="sidebar-link">3.2 运算符</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_3-2-1-比较运算符" class="sidebar-link">3.2.1 比较运算符</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_3-2-2-逻辑运算符" class="sidebar-link">3.2.2 逻辑运算符</a></li><li class="sidebar-sub-header level3"><a href="/pages/9234b6/#_3-3-函数" class="sidebar-link">3.3 函数</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_3-3-1-普通函数" class="sidebar-link">3.3.1 普通函数</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_3-3-2-匿名函数" class="sidebar-link">3.3.2 匿名函数</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_3-3-3-箭头函数" class="sidebar-link">3.3.3 箭头函数</a></li><li class="sidebar-sub-header level3"><a href="/pages/9234b6/#_3-4-面向对象" class="sidebar-link">3.4 面向对象</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_3-4-1-构造函数定义" class="sidebar-link">3.4.1 构造函数定义：</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_3-4-2-创建对象和操作成员" class="sidebar-link">3.4.2 创建对象和操作成员：</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_3-4-3-字面式创建对象" class="sidebar-link">3.4.3 字面式创建对象</a></li><li class="sidebar-sub-header level3"><a href="/pages/9234b6/#_3-5-数组" class="sidebar-link">3.5 数组</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_3-5-1-数组定义" class="sidebar-link">3.5.1 数组定义</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_3-5-2-数组使用和遍历" class="sidebar-link">3.5.2 数组使用和遍历</a></li><li class="sidebar-sub-header level3"><a href="/pages/9234b6/#_3-6-集合拓展" class="sidebar-link">3.6 集合拓展</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_3-6-1-set-集合" class="sidebar-link">3.6.1 Set 集合</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_3-6-2-map-集合" class="sidebar-link">3.6.2 Map 集合</a></li><li class="sidebar-sub-header level3"><a href="/pages/9234b6/#_3-7-字符串拓展" class="sidebar-link">3.7 字符串拓展</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_3-7-1-常用方法" class="sidebar-link">3.7.1 常用方法</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_3-7-2-模板字符串" class="sidebar-link">3.7.2 模板字符串</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/9234b6/#四、es6进阶语法" class="sidebar-link">四、ES6进阶语法</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/9234b6/#_4-1-函数进阶-了解" class="sidebar-link">4.1 函数进阶（了解）</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_4-1-1-给函数参数设置默认值" class="sidebar-link">4.1.1 给函数参数设置默认值</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_4-1-2-rest-参数-掌握" class="sidebar-link">4.1.2 rest 参数（掌握）</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_4-1-3-拓展运算符" class="sidebar-link">4.1.3 拓展运算符 ...</a></li><li class="sidebar-sub-header level3"><a href="/pages/9234b6/#_4-2-类和继承-掌握" class="sidebar-link">4.2 类和继承（掌握）</a></li><li class="sidebar-sub-header level3"><a href="/pages/9234b6/#_4-3-变量解构赋值-掌握" class="sidebar-link">4.3 变量解构赋值（掌握）</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_4-3-1-数组解构赋值" class="sidebar-link">4.3.1 数组解构赋值</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_4-3-2-对象解构赋值" class="sidebar-link">4.3.2 对象解构赋值</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_4-3-3-字符串解构赋值" class="sidebar-link">4.3.3 字符串解构赋值</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/9234b6/#五、js中的dom" class="sidebar-link">五、JS中的DOM</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/9234b6/#_5-1-dom-概述" class="sidebar-link">5.1 DOM 概述</a></li><li class="sidebar-sub-header level3"><a href="/pages/9234b6/#_5-2-标签和属性操作" class="sidebar-link">5.2 标签和属性操作</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_5-2-1-document-变量" class="sidebar-link">5.2.1 document 变量</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_5-2-2-window-onload-函数" class="sidebar-link">5.2.2 window.onload 函数</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_5-2-3-元素对象获取" class="sidebar-link">5.2.3_元素对象获取</a></li><li class="sidebar-sub-header level3"><a href="/pages/9234b6/#_5-3-元素对象属性操作" class="sidebar-link">5.3 元素对象属性操作</a></li><li class="sidebar-sub-header level3"><a href="/pages/9234b6/#_5-4-node-对象的属性和方法" class="sidebar-link">5.4_Node 对象的属性和方法</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_5-4-1-常用属性" class="sidebar-link">5.4.1 常用属性</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_5-4-2-常用方法" class="sidebar-link">5.4.2 常用方法</a></li><li class="sidebar-sub-header level3"><a href="/pages/9234b6/#_5-5-元素节点增删改案例" class="sidebar-link">5.5 元素节点增删改案例</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/9234b6/#六、事件驱动" class="sidebar-link">六、事件驱动</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/9234b6/#_6-1-事件类型-常见" class="sidebar-link">6.1 事件类型(常见)</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_6-1-1-鼠标事件" class="sidebar-link">6.1.1 鼠标事件</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_6-1-2-键盘事件" class="sidebar-link">6.1.2 键盘事件</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_6-1-3-表单事件-form" class="sidebar-link">6.1.3 表单事件 form</a></li><li class="sidebar-sub-header level3"><a href="/pages/9234b6/#_6-2-事件绑定的方法" class="sidebar-link">6.2 事件绑定的方法</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_6-2-1-标签上使用-onxxx属性绑定" class="sidebar-link">6.2.1 标签上使用 onxxx属性绑定</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_6-2-2-通过元素对象的事件属性绑定" class="sidebar-link">6.2.2 通过元素对象的事件属性绑定</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_6-2-3-通过元素对象的方法绑定事件" class="sidebar-link">6.2.3 通过元素对象的方法绑定事件</a></li><li class="sidebar-sub-header level4"><a href="/pages/9234b6/#_6-2-4-美女图片切换案例" class="sidebar-link">6.2.4 美女图片切换案例</a></li><li class="sidebar-sub-header level3"><a href="/pages/9234b6/#_6-3-事件驱动-dom操作案例" class="sidebar-link">6.3 事件驱动+DOM操作案例</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/9234b6/#七、小结与作业" class="sidebar-link">七、小结与作业</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/9234b6/#_7-1-小结" class="sidebar-link">7.1 小结</a></li><li class="sidebar-sub-header level3"><a href="/pages/9234b6/#_7-2-作业" class="sidebar-link">7.2 作业</a></li></ul></li></ul></li><li><a href="/pages/2288f1/" class="sidebar-link">异步请求-Ajax</a></li><li><a href="/pages/508d4a/" class="sidebar-link">Vue核心基础</a></li><li><a href="/pages/6ea31e/" class="sidebar-link">RESTful课件</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>权限控制</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>NoSQL</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>微服务</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>消息中间件</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>脚手架</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>技术增值</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="articleInfo-wrap" data-v-06225672><div class="articleInfo" data-v-06225672><ul class="breadcrumbs" data-v-06225672><li data-v-06225672><a href="/" title="首页" class="iconfont icon-home router-link-active" data-v-06225672></a></li> <li data-v-06225672><a href="/categories/?category=Java%E9%80%9F%E9%80%9A" title="分类" data-v-06225672>Java速通</a></li><li data-v-06225672><a href="/categories/?category=%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB" title="分类" data-v-06225672>前后端分离</a></li></ul> <div class="info" data-v-06225672><div title="作者" class="author iconfont icon-touxiang" data-v-06225672><a href="https://github.com/langfeiyes" target="_blank" title="作者" class="beLink" data-v-06225672>langfeiyes</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-06225672><a href="javascript:;" data-v-06225672>2024-03-10</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="">ECMAScript6<!----></h1>  <div class="theme-vdoing-content content__default"><h1 id="ecmascript6"><a href="#ecmascript6" class="header-anchor">#</a> ECMAScript6</h1> <p><strong><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20230708092420700.png" alt="image-20230708092420700" style="zoom:50%;"></strong></p> <h2 id="一、进入学习内容与目标"><a href="#一、进入学习内容与目标" class="header-anchor">#</a> 一、进入学习内容与目标</h2> <ul><li>了解 ECMAScript 与 JavaScript 关系。</li> <li>掌握 Visual Studio Code 安装。</li> <li>熟练掌握 ES6 核心语法和进阶语法。</li> <li>了解 JS 中的 DOM 操作</li> <li>掌握 JS 的事件绑定和使用</li></ul> <h2 id="二、javascript介绍"><a href="#二、javascript介绍" class="header-anchor">#</a> 二、JavaScript介绍</h2> <h3 id="_2-1-简介"><a href="#_2-1-简介" class="header-anchor">#</a> 2.1 简介</h3> <p>JavaScript 最初由 Netscape 的 Brendan Eich 设计，最初将其脚本语言命名为 LiveScript，后来 Netscape 在与 Sun 合作之后将其改名为 JavaScript。JavaScript 最初受 Java 启发而开始设计的，目的之一就是看上去像“Java”，因此语法上有类似之处，一些名称和命名规范也借自 Java，但 JavaScript 的主要设计原则源自 Self 和 Scheme。</p> <p>发展初期，JavaScript 的标准并未确定，同期有 Netscape 的 JavaScript，微软的 JScript 和 CEnvi 的 ScriptEase 三足鼎立。为了互用性，ECMA 国际（前身为欧洲计算机制造商协会）创建了 ECMA-262 标准（ECMAScript），这个标准是以 JavaScript 基础制定。换一句通俗的话说，<strong>ECMAScript 是语言标准，而 JavaScript 是这个语言标准的实现之一</strong>。</p> <p>发展历史了解：</p> <ul><li>1997 年 ECMAScript 1.0 诞生。</li> <li>1998 年 6 月 ECMAScript 2.0 诞生，包含一些小的更改，用于同步独立的 ISO 国际标准。</li> <li>1999 年 12 月 ECMAScript 3.0 诞生，它是一个巨大的成功，在业界得到了广泛的支持。</li> <li>2000 年的 ECMAScript 4.0 是当下 ES6 的前身，但由于这个版本太过激烈，对 ES3 做了彻底升级，所以暂时被&quot;和谐&quot;了。</li> <li>2009 年 12 月，ECMAScript 5.0 版正式发布。ECMA 专家组预计 ECMAScript 的第五个版本会在 2013 年中期到 2018 年作为主流的开发</li> <li>2011 年 6 月，ECMAScript 5.1 版发布，并且成为 ISO 国际标准。</li> <li>2013 年 3 月，ES6 草案冻结，不再添加新的功能，新的功能将被放到 ECMAScript 7 中。</li> <li>2013 年 12 月，ECMAScript 6 草案发布。然后是 12 个月的讨论期，听取各方反馈。</li> <li>2015 年 6 月，ECMAScript 6 发布正式版本，即 ECMAScript 2015，成为国际标准。</li></ul> <p><strong>作用特点</strong>：</p> <ol><li>是一种解释性脚本语言（代码不进行预编译）；</li> <li>主要用来向 HTML 页面添加交互行为；</li> <li>可以直接嵌入 HTML 页面，也可以写成单独的 js 文件有利于结构和行为的分离。</li></ol> <p><strong>组成部分</strong></p> <ol><li><p><strong>ECMAScript（核心）</strong>：JavaScript 语言基础，规定了JavaScript 的核心语法，如 数据类型、关键字、保留字、运算符、对象和语句等。</p></li> <li><p><strong>DOM（文档对象模型）</strong>：规定了访问 HTML 和 XML 的接口（提供了访问 HTML 文档（如 body、form、div、textarea 等）的途径以及操作方法）；Node：Document、Element、Attribute、Text</p></li> <li><p>BOM（浏览器对象模型）：提供了独立于内容而在浏览器窗口之间进行交互的对象和方法(提供了访问某些功能（如浏览器窗口大小、版本信息、浏览历史记录等）。</p> <p><em><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/image-20200505193644796.png" alt=""></em></p></li></ol> <h3 id="_2-2-编写位置"><a href="#_2-2-编写位置" class="header-anchor">#</a> 2.2 编写位置</h3> <p><span style="color:red;">HTML 和 JS 都是直接交给浏览器去执行和渲染, 每个浏览器中都有对应的 JS 引擎,JS 代码的执行需要依赖 HTML，不能单独执行。</span></p> <h4 id="_2-2-1-编写在script-标签中"><a href="#_2-2-1-编写在script-标签中" class="header-anchor">#</a> 2.2.1 编写在script 标签中</h4> <p>script 标签可以存放在 HTML 标签中的任何位置，但是推荐写在 head 标签里面（行业标准，直观）。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Content-Type<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/html; charset=UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>JS可编写的位置<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;Hello JavaScript!&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>	<span class="token comment">// 类似 Java的 System.out.println()</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Hello JavaScript<span class="token operator">!</span><span class="token punctuation">)</span><span class="token punctuation">;</span>		<span class="token comment">// 错误代码开始，终止后续js代码执行</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;Hello JavaScript!&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p><strong>注意: HTML 中 js 的所有代码都是顺序执行,出错则不再往下执行，SyntaxError 则都不执行</strong>.</p> <h4 id="_2-2-2-编写在-js-文件中"><a href="#_2-2-2-编写在-js-文件中" class="header-anchor">#</a> 2.2.2 编写在 JS 文件中</h4> <p>单独编写一个文件 (*.js) 来存放 Javascript 代码，然后在需要使用的 html 页面直接引入该 js 文件。</p> <p>好处：可以使 js 文件和 HTML 文件相分离、一个 js 文件可被多个 HTML 文件使用、维护起来也更方便等等。</p> <p>index.js: 编写JS代码</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//这里只能编写JS代码</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;Hello JavaScript&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>index.html: 引入 JS 文件</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token comment">&lt;!--使用 script 标签的 src 属性加载指定的 js文件,type 可省略--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><strong>注意</strong></p> <p>1、script标签不能引用js文件又直接写 js 代码（只有文件有效）</p> <p>2、script <strong>标签是双标签</strong>,不能写成单标签。<code>&lt;script&gt;</code> 标签不成对时，js 文件不执行</p> <h2 id="三、es6核心语法"><a href="#三、es6核心语法" class="header-anchor">#</a> 三、ES6核心语法</h2> <h3 id="_3-1-变量和常量"><a href="#_3-1-变量和常量" class="header-anchor">#</a> 3.1 变量和常量</h3> <h4 id="_3-1-1-数据类型"><a href="#_3-1-1-数据类型" class="header-anchor">#</a> 3.1.1 数据类型</h4> <p>JavaScript 中有许多数据类型，它们分为两大类：原始数据类型和对象数据类型，以下是一些常用的数据类型</p> <ul><li><p>原始类型</p> <ul><li><p><strong>字符串（String）</strong>：用于表示文本，用单引号或双引号括起来。</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">var</span> myString <span class="token operator">=</span> <span class="token string">'Hello, World!'</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li> <li><p><strong>数字（Number）</strong>：用于表示数值，可以是整数或浮点数。</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">var</span> myNumber <span class="token operator">=</span> <span class="token number">42</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li> <li><p><strong>布尔（Boolean）</strong>：用于表示逻辑值，只有两个值：true 或 false。</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">var</span> myBoolean <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li> <li><p><strong>空值（Null）</strong>：表示一个空值或没有值的对象。</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">var</span> myNull <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li> <li><p><strong>未定义（Undefined）</strong>：表示一个未初始化的变量。</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">var</span> myUndefined<span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li></ul></li> <li><p>对象类型</p> <ul><li><p><strong>对象（Object）</strong>：表示复杂数据结构，是键值对的集合。</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">var</span> myObject <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">25</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li> <li><p><strong>数组（Array）</strong>：表示有序的集合，可以包含不同数据类型的元素。</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">var</span> myArray <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token string">'two'</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li> <li><p><strong>日期（Date）</strong>：表示日期和时间。</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">var</span> myDate <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li></ul></li></ul> <h4 id="_3-1-2-let"><a href="#_3-1-2-let" class="header-anchor">#</a> 3.1.2 let</h4> <p><code>var</code> 的设计是在早期版本的 JavaScript 中，它是唯一可用的变量声明关键字。随着 JavaScript 的发展，新的 ECMAScript 标准引入了 <code>let</code> 和 <code>const</code> 关键字，这两者解决了 <code>var</code> 存在的一些问题。日常开发中推荐使用 <code>let</code> 和 <code>const</code> 来代替 <code>var</code>。</p> <p>使用 <code>let</code> 声明变量的特点：</p> <ul><li>同一作用域中不允许重复定义（var 可以）；</li> <li>变量声明不会提前(var 会提前)；</li> <li>具有块级作用域（var 没有）。</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 同一作用域中不允许重复定义</span>
<span class="token keyword">let</span> username <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token comment">// let username = 2;      // Identifier 'username' has already been declared</span>

<span class="token comment">// 变量声明不会提前</span>
<span class="token comment">// console.log(age); 			 // Cannot access 'age' before initialization</span>
<span class="token keyword">let</span> age <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">{</span>
    <span class="token keyword">var</span> email <span class="token operator">=</span> <span class="token string">&quot;aa@&quot;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>email<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 具有块级作用域</span>
<span class="token punctuation">{</span>
    <span class="token keyword">let</span> sn <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>sn<span class="token punctuation">)</span><span class="token punctuation">;</span> 			<span class="token comment">// sn is not defined</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h4 id="_3-1-3-const"><a href="#_3-1-3-const" class="header-anchor">#</a> 3.1.3 const</h4> <p>使用 <code>const</code> 用来声明常量，其有以下特点：</p> <ul><li>变量声明不会提前；</li> <li>具有块级作用域；</li> <li>常量值不可改变,对象中的属性值可以改变；</li> <li>声明时需同时赋值；</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> age <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
age <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>              <span class="token comment">// Assignment to constant variable</span>

<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">name</span> <span class="token operator">:</span> <span class="token string">'xx'</span><span class="token punctuation">,</span> <span class="token literal-property property">age</span> <span class="token operator">:</span> <span class="token number">11</span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// 创建对象赋予 obj 常量</span>
obj<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">'yy'</span><span class="token punctuation">;</span>			<span class="token comment">// 修改对象中属性的值</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>   

<span class="token keyword">const</span> b<span class="token punctuation">;</span>
b <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>              <span class="token comment">// Assignment to constant variable</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="_3-2-运算符"><a href="#_3-2-运算符" class="header-anchor">#</a> 3.2 运算符</h3> <p>JS 中的大部分运算符都和 Java 中的一样,这里只说几个不一样的运算符。</p> <h4 id="_3-2-1-比较运算符"><a href="#_3-2-1-比较运算符" class="header-anchor">#</a> 3.2.1 比较运算符</h4> <p><code>==</code> 以及 <code>===</code> 的区别：
<strong>==  比较运算符</strong>：用于比较两个数据的值是否相等，不会去判断类型 console.log(&quot;18&quot; == 18 );
<strong>=== 比较运算符</strong>：先判断数据类型是否相等，然后再去判断值是否相等 console.log(&quot;18&quot; === 18);</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;-----比较算符 == === --------&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;18&quot;</span> <span class="token operator">==</span> <span class="token number">18</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;18&quot;</span> <span class="token operator">===</span> <span class="token number">18</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h4 id="_3-2-2-逻辑运算符"><a href="#_3-2-2-逻辑运算符" class="header-anchor">#</a> 3.2.2 逻辑运算符</h4> <p><strong>在逻辑运算中 0、&quot;&quot;、false、NaN、undefined、null 被看成为 false</strong>，其他数据被看成 true。</p> <p><code>&amp;&amp;</code>（逻辑与）和 <code>||</code>（逻辑或）在 JavaScript 中的表达式有短路的特性，它们的返回值不一定是布尔值。</p> <ul><li><p>逻辑与（&amp;&amp;）：</p> <ul><li><p><strong>返回值：</strong> 如果条件都为真， 返回最后一个为真的表达式的值。</p> <p>​                 如果第一个条件为假，返回第一个为假的表达式的值。</p></li> <li><p><strong>短路规则：</strong> 如果第一个条件为假，整个表达式就会短路，不再继续判断后面的条件</p></li></ul> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;-----逻辑运算符 &amp;&amp; --------&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token boolean">true</span> <span class="token operator">&amp;&amp;</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">&amp;&amp;</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">&amp;&amp;</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;A&quot;</span> <span class="token operator">&amp;&amp;</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;&quot;</span> <span class="token operator">&amp;&amp;</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">null</span> <span class="token operator">&amp;&amp;</span> <span class="token string">&quot;B&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;A&quot;</span> <span class="token operator">&amp;&amp;</span> <span class="token string">&quot;B&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">&amp;&amp;</span> <span class="token number">2</span> <span class="token operator">&amp;&amp;</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">&amp;&amp;</span> <span class="token keyword">null</span> <span class="token operator">&amp;&amp;</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;&quot;</span> <span class="token operator">&amp;&amp;</span> <span class="token keyword">null</span> <span class="token operator">&amp;&amp;</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div></li> <li><p>逻辑或（||）：</p> <ul><li><p><strong>返回值：</strong> 如果有一个条件为真，返回第一个为真的表达式的值。</p> <p>​                如果所有条件为假，返回最后一个为假的表达式的值。</p></li> <li><p><strong>短路规则：</strong> 如果第一个条件为真，整个表达式就会短路，不再继续判断后面的条件。</p></li></ul> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;-----逻辑运算符 || --------&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token boolean">true</span> <span class="token operator">||</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">||</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">||</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;A&quot;</span> <span class="token operator">||</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;&quot;</span> <span class="token operator">||</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">null</span> <span class="token operator">||</span> <span class="token string">&quot;B&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;A&quot;</span> <span class="token operator">||</span> <span class="token string">&quot;B&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">||</span> <span class="token number">2</span> <span class="token operator">||</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">||</span> <span class="token keyword">null</span> <span class="token operator">||</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;&quot;</span> <span class="token operator">||</span> <span class="token keyword">null</span> <span class="token operator">||</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div></li></ul> <h3 id="_3-3-函数"><a href="#_3-3-函数" class="header-anchor">#</a> 3.3 函数</h3> <p>js 中的函数，作用和 Java 中的方法一样，都是为了实现代码的复用，将代码写到函数之中，避免页面载入时就执行代码，可以多次调用，提高代码的复用性。</p> <h4 id="_3-3-1-普通函数"><a href="#_3-3-1-普通函数" class="header-anchor">#</a> 3.3.1 普通函数</h4> <p><strong>语法</strong>：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// JS中不用指定函数的返回值类型(无论怎样都有返回,JS是弱类型语言)</span>
<span class="token keyword">function</span> <span class="token function">函数名</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">[</span>参数名称<span class="token number">1</span><span class="token punctuation">,</span> 参数名称<span class="token number">2</span><span class="token punctuation">,</span> <span class="token operator">...</span><span class="token punctuation">,</span> 参数名称<span class="token constant">N</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
 	<span class="token comment">//程序代码</span>
    <span class="token punctuation">[</span><span class="token keyword">return</span> 值<span class="token punctuation">;</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>参数和返回值都是可选的，由自己的实际需求决定，如果函数没有返回值，就默认返回 undefined。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 普通函数定义,有参无返回</span>
<span class="token keyword">function</span> <span class="token function">greet</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;Hello, &quot;</span> <span class="token operator">+</span> name <span class="token operator">+</span> <span class="token string">&quot;!&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 普通函数定义,有参有返回</span>
<span class="token keyword">function</span> <span class="token function">addNumbers</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> a <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 函数调用</span>
<span class="token function">greet</span><span class="token punctuation">(</span><span class="token string">&quot;小狼&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>	
<span class="token keyword">let</span> ret <span class="token operator">=</span> <span class="token function">addNumbers</span><span class="token punctuation">(</span><span class="token number">15</span><span class="token punctuation">,</span><span class="token number">8</span><span class="token punctuation">)</span><span class="token punctuation">;</span>				
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ret<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p><strong>注意</strong>：定义函数时的行参和调用函数时实参可以不一致，在函数内容可以使用 arguments 变量来查看函数被调用时带了哪些实际参数。</p> <h4 id="_3-3-2-匿名函数"><a href="#_3-3-2-匿名函数" class="header-anchor">#</a> 3.3.2 匿名函数</h4> <p><strong>语法</strong>:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> <span class="token function-variable function">变量名</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">[</span>参数名称<span class="token number">1</span><span class="token punctuation">,</span> 参数名称<span class="token number">2</span><span class="token punctuation">,</span> <span class="token operator">...</span><span class="token punctuation">,</span> 参数名称<span class="token constant">N</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">//程序代码</span>
    <span class="token punctuation">[</span><span class="token keyword">return</span> 值<span class="token punctuation">;</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>匿名函数是指没有固定的函数名称，通常情况是定义一个变量接收该匿名函数，实际开发中用的比较多，可以把匿名函数看成一个普通的值来理解。</p> <p><strong>案例</strong>:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> <span class="token function-variable function">add</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span>b</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> a<span class="token operator">+</span>b<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">let</span> ret2 <span class="token operator">=</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ret2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//4</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h4 id="_3-3-3-箭头函数"><a href="#_3-3-3-箭头函数" class="header-anchor">#</a> 3.3.3 箭头函数</h4> <p>箭头函数和 Java8 的Lambda 是类似的，Lambda 是模范了 js 的箭头函数来设计的。</p> <p><strong>语法</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>     <span class="token comment">// () 为函数参数列表，{} 为函数的执行体，需要用一个变量来接收</span>
<span class="token comment">// 箭头函数和匿名函数一样，由于没有固定函数名，需要用一个变量来接收</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><strong>案例</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 无参单行函数体的箭头函数</span>
<span class="token keyword">let</span> <span class="token function-variable function">fun1</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;箭头函数&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 无参多行函数体的箭头函数</span>
<span class="token keyword">let</span> <span class="token function-variable function">fun2</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;函数体1&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;函数体2&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// 一个形参数的箭头函数</span>
<span class="token keyword">let</span> <span class="token function-variable function">fun3</span> <span class="token operator">=</span> <span class="token parameter">username</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>username<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 多个参数多行函数体</span>
<span class="token keyword">let</span> <span class="token function-variable function">fun4</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">username<span class="token punctuation">,</span>age</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>username<span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>age<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 箭头函数调用</span>
<span class="token function">fun1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">fun2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">fun3</span><span class="token punctuation">(</span><span class="token string">&quot;小明&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">fun4</span><span class="token punctuation">(</span><span class="token string">&quot;晓东&quot;</span><span class="token punctuation">,</span><span class="token number">17</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><p><strong>注意</strong>： 箭头函数没有<code>arguments</code> 等内置变量。</p> <h3 id="_3-4-面向对象"><a href="#_3-4-面向对象" class="header-anchor">#</a> 3.4 面向对象</h3> <p>JavaScript 提供了一个构造函数（Constructor）模式。 所谓”构造函数”，其实就是一个普通函数，但是内部使用了 this 变量。对构造函数使用 new 运算符，就能生成实例，并且 this 变量会绑定在实例对象上。</p> <h4 id="_3-4-1-构造函数定义"><a href="#_3-4-1-构造函数定义" class="header-anchor">#</a> 3.4.1 构造函数定义：</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//如何使用JS来定义一个类(构造函数)</span>
<span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span>age</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">say</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;大家好,我是&quot;</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p><strong>构造函数注意事项</strong>：首字母大写，这是规范，官方都遵循这一个规范，如 Number() Array()</p> <h4 id="_3-4-2-创建对象和操作成员"><a href="#_3-4-2-创建对象和操作成员" class="header-anchor">#</a> 3.4.2 创建对象和操作成员：</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> p1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">&quot;张三&quot;</span><span class="token punctuation">,</span><span class="token number">18</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//获取对象的属性值</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p1<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//修改对象的属性值</span>
p1<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">'John'</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//调用对象的方法</span>
p1<span class="token punctuation">.</span><span class="token function">say</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//给对象设置新的属性</span>
p1<span class="token punctuation">.</span>email <span class="token operator">=</span> <span class="token string">&quot;john@example.com&quot;</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p1<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h4 id="_3-4-3-字面式创建对象"><a href="#_3-4-3-字面式创建对象" class="header-anchor">#</a> 3.4.3 字面式创建对象</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//字面量方式定义对象</span>
<span class="token keyword">let</span> p2 <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;李四&quot;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
    <span class="token function-variable function">sleep</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">second</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;太累了,睡眠:&quot;</span><span class="token operator">+</span>second<span class="token operator">+</span><span class="token string">&quot;秒&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">//获取对象的属性</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p2<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//调用方法</span>
p2<span class="token punctuation">.</span><span class="token function">sleep</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p><strong>注意</strong>：属性名如果有特殊字符需要加引号括起来。</p> <h3 id="_3-5-数组"><a href="#_3-5-数组" class="header-anchor">#</a> 3.5 数组</h3> <p>js 中的数组使用一个明确的类型 Array 来表示，和 Java 有所不同。</p> <h4 id="_3-5-1-数组定义"><a href="#_3-5-1-数组定义" class="header-anchor">#</a> 3.5.1 数组定义</h4> <ul><li><p>创建数组对象</p> <blockquote><p>let arr1 = new Array(6);</p></blockquote></li> <li><p>静态初始化</p> <blockquote><p>let arr2 = new Array(&quot;西施&quot;,&quot;王昭君&quot;,&quot;貂蝉&quot;,&quot;杨贵妃&quot;);
let arr3 = new Array(1, 2, 3, 4);</p></blockquote></li> <li><p>简写</p> <blockquote><p>let arr4 = [&quot;西施&quot;, &quot;王昭君&quot;, &quot;貂蝉&quot;, &quot;杨贵妃&quot;];</p></blockquote></li></ul> <p><strong>注意</strong>： js 中的数组不会出现数组越界的异常，元素个数不是定长的。</p> <h4 id="_3-5-2-数组使用和遍历"><a href="#_3-5-2-数组使用和遍历" class="header-anchor">#</a> 3.5.2 数组使用和遍历</h4> <p>数组元素操作和 Java 中一样，使用 arr[index]  的方法，遍历和 Java 也类型，是用 for循环 或 forEach 方法</p> <ul><li>for : 最简单的一种循环遍历方法，性能最高的一种</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;========== for 循环 =========&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">&lt;</span> arr3<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr3<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ul><li><p>forEach: 数组自带的遍历方法，虽然使用频率略高，但是性能仍然比普通循环略低</p> <p>数组里的元素个数多少个，回调函数就会执行多少次
第一个参数是数组里的元素
第二个参数为数组里元素的索引
第三个参数则是遍历的数组本身</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;========== forEach 循环 =========&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
arr3<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span>index<span class="token punctuation">,</span>array</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div></li></ul> <p><strong>完整案例</strong>：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr0 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> arr1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token string">&quot;西施&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;王昭君&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;貂蝉&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;杨贵妃&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> arr2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> arr3 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;西施&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;王昭君&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;貂蝉&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;杨贵妃&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr0<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr1<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr2<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr3<span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;========== for 循环 =========&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">&lt;</span> arr3<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr3<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;========== forEach 循环 =========&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
arr3<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span>index<span class="token punctuation">,</span>array</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h3 id="_3-6-集合拓展"><a href="#_3-6-集合拓展" class="header-anchor">#</a> 3.6 集合拓展</h3> <h4 id="_3-6-1-set-集合"><a href="#_3-6-1-set-集合" class="header-anchor">#</a> 3.6.1 Set 集合</h4> <p>Set 跟 Java 语言中 Set 数据结构一样，有去重特点，但也有区别，其是有序的。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> books <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

books<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">&quot;三国演义&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
books<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">&quot;西游记&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
books<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">&quot;水浒传&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
books<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">&quot;红楼梦&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
books<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">&quot;红楼梦&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 重复的不会存入</span>

books<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">ele</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token comment">// 遍历</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ele<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h4 id="_3-6-2-map-集合"><a href="#_3-6-2-map-集合" class="header-anchor">#</a> 3.6.2 Map 集合</h4> <p>Map 是一种键值对的数据结构。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> personMap <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

personMap<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">&quot;id&quot;</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
personMap<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">&quot;name&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;刘备&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
personMap<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">&quot;age&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;47&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>personMap<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&quot;id&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>personMap<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&quot;name&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>personMap<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&quot;age&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

personMap<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> key</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 遍历</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>key <span class="token operator">+</span> <span class="token string">&quot; : &quot;</span> <span class="token operator">+</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h3 id="_3-7-字符串拓展"><a href="#_3-7-字符串拓展" class="header-anchor">#</a> 3.7 字符串拓展</h3> <h4 id="_3-7-1-常用方法"><a href="#_3-7-1-常用方法" class="header-anchor">#</a> 3.7.1 常用方法</h4> <ul><li>includes()：返回布尔值，表示是否找到了参数字符串。</li> <li>startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。</li> <li>endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。</li></ul> <p>注意：三个方法都支持第二个参数，表示开始搜索的位置。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token string">'Hello World!'</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">.</span><span class="token function">startsWith</span><span class="token punctuation">(</span><span class="token string">'Hello'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>     <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">.</span><span class="token function">endsWith</span><span class="token punctuation">(</span><span class="token string">'!'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>           <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'o'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>           <span class="token comment">// true</span>


<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token string">'Hello World!'</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">.</span><span class="token function">startsWith</span><span class="token punctuation">(</span><span class="token string">'world'</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">.</span><span class="token function">endsWith</span><span class="token punctuation">(</span><span class="token string">'Hello'</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'Hello'</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">// false</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h4 id="_3-7-2-模板字符串"><a href="#_3-7-2-模板字符串" class="header-anchor">#</a> 3.7.2 模板字符串</h4> <p>模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 普通字符串</span>
<span class="token keyword">let</span> str1 <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Hello.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str1<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 多行字符串</span>
<span class="token keyword">let</span> str2 <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Hello
World.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str2<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 字符串中嵌入变量</span>
<span class="token keyword">let</span> name <span class="token operator">=</span> <span class="token string">&quot;xx&quot;</span><span class="token punctuation">,</span> age <span class="token operator">=</span> <span class="token number">17</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> str3 <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Hello </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">, your age is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>age<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str3<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性</span>
<span class="token keyword">let</span> person <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">name</span> <span class="token operator">:</span> <span class="token string">'yy'</span><span class="token punctuation">,</span> <span class="token literal-property property">age</span> <span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> str4 <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Hello </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>person<span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">, your age is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>person<span class="token punctuation">.</span>age <span class="token operator">+</span> <span class="token number">1</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str4<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><h2 id="四、es6进阶语法"><a href="#四、es6进阶语法" class="header-anchor">#</a> 四、ES6进阶语法</h2> <h3 id="_4-1-函数进阶-了解"><a href="#_4-1-函数进阶-了解" class="header-anchor">#</a> 4.1 函数进阶（了解）</h3> <h4 id="_4-1-1-给函数参数设置默认值"><a href="#_4-1-1-给函数参数设置默认值" class="header-anchor">#</a> 4.1.1 <strong>给函数参数设置默认值</strong></h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// ES6 之前，不能直接为函数的参数指定默认值，只能采用变通的方法</span>
<span class="token keyword">function</span> <span class="token function">fun5</span><span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    x <span class="token operator">=</span> x <span class="token operator">||</span> <span class="token number">1</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">fun5</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// ES6 做法，代码简洁易阅读</span>
<span class="token keyword">function</span> <span class="token function">fun6</span><span class="token punctuation">(</span><span class="token parameter">x <span class="token operator">=</span> <span class="token number">1</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token comment">// 注意当 x 为 undefined 时 x 赋值为 1</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">fun6</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">fun7</span><span class="token punctuation">(</span>name <span class="token operator">=</span> <span class="token string">'xx'</span><span class="token punctuation">,</span> age <span class="token operator">=</span> <span class="token string">'18'</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span> age<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">fun7</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h4 id="_4-1-2-rest-参数-掌握"><a href="#_4-1-2-rest-参数-掌握" class="header-anchor">#</a> 4.1.2 rest 参数（掌握）</h4> <p>用于获取函数的多余参数，这样就不需要使用 arguments 对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中，类比 Java 可变参数。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">func</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> <span class="token operator">...</span>values</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>					<span class="token comment">// 2</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>values<span class="token punctuation">)</span><span class="token punctuation">;</span>		<span class="token comment">// [3,4]</span>
<span class="token punctuation">}</span>
<span class="token function">func</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><strong>注意</strong>: rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。</p> <h4 id="_4-1-3-拓展运算符"><a href="#_4-1-3-拓展运算符" class="header-anchor">#</a> 4.1.3 拓展运算符 <code>...</code></h4> <p>调用函数时，若在数组类型的实参前使用 <code>...</code> 运算符，那么数组中元素值被按顺序赋值给函数的参数；</p> <p>可以用来合并数组</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">func</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a <span class="token operator">+</span> b <span class="token operator">+</span> c<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token function">func</span><span class="token punctuation">(</span><span class="token operator">...</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> arr1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> arr2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> arr3 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>arr1<span class="token punctuation">,</span> <span class="token operator">...</span>arr2<span class="token punctuation">]</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr3<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="_4-2-类和继承-掌握"><a href="#_4-2-类和继承-掌握" class="header-anchor">#</a> 4.2 类和继承（掌握）</h3> <p>js 中的类和继承 类似于 Java 中的类和继承。</p> <p>构造器使用：constructor</p> <p>方法不用声明返回类型和权限修饰</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 定义类</span>
<span class="token keyword">class</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span>
    <span class="token comment">// 定义构造函数</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token comment">// 给类的实列定义方法</span>
    <span class="token function">showName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token comment">// 给类定义静态方法</span>
    <span class="token keyword">static</span> <span class="token function">eat</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'进食'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// 定义子类继承 Animal，那么父类的成员都继承</span>
<span class="token keyword">class</span> <span class="token class-name">Mouse</span> <span class="token keyword">extends</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> color</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// 给 name 赋值</span>
        <span class="token keyword">super</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>color <span class="token operator">=</span> color
    <span class="token punctuation">}</span>
    <span class="token comment">// 给子类实例定义方法</span>
    <span class="token function">showInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>color<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> m <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Mouse</span><span class="token punctuation">(</span><span class="token string">'Jerry'</span><span class="token punctuation">,</span> <span class="token string">'gray'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
m<span class="token punctuation">.</span><span class="token function">showName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
m<span class="token punctuation">.</span><span class="token function">showInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
Animal<span class="token punctuation">.</span><span class="token function">eat</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br></div></div><h3 id="_4-3-变量解构赋值-掌握"><a href="#_4-3-变量解构赋值-掌握" class="header-anchor">#</a> 4.3 变量解构赋值（掌握）</h3> <p>ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。有数组解构赋值，对象解构赋值等。注意一下几点：</p> <ul><li>若解构不成功，变量的值就等于 <code>undefined</code>；</li> <li>解构赋值允许指定默认值：
<ul><li>ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于 <code>undefined</code>，默认值才会生效;</li> <li>默认值是一个表达式的情况下，表达式是惰性求值的，即只有在解构赋值undefined时，才会求值。</li></ul></li></ul> <h4 id="_4-3-1-数组解构赋值"><a href="#_4-3-1-数组解构赋值" class="header-anchor">#</a> 4.3.1 数组解构赋值</h4> <p>从数组中提取值，按照对应位置，对多个变量同时赋值。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/*
之前对多个变量赋值
let a = 1;
let b = 2;
let c = 3;
*/</span>
<span class="token keyword">let</span> <span class="token punctuation">[</span>a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> <span class="token punctuation">[</span>d<span class="token punctuation">,</span> e<span class="token punctuation">,</span> f<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>d<span class="token punctuation">,</span> e<span class="token punctuation">,</span> f<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> <span class="token punctuation">[</span>x <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">undefined</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> <span class="token punctuation">[</span>y <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">null</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> <span class="token punctuation">[</span>z <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">''</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> z<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">func</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>  
<span class="token keyword">let</span> <span class="token punctuation">[</span>i <span class="token operator">=</span> <span class="token function">func</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// 当没有解构出值的时候，才会执行函数 func</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h4 id="_4-3-2-对象解构赋值"><a href="#_4-3-2-对象解构赋值" class="header-anchor">#</a> 4.3.2 对象解构赋值</h4> <p>一次性取出对象中多个属性数据，对象的属性没有次序，变量必须与属性同名，才能取到正确的值。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> <span class="token punctuation">{</span>a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">a</span> <span class="token operator">:</span> <span class="token string">&quot;aaa&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">b</span> <span class="token operator">:</span> <span class="token string">&quot;bbb&quot;</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 当前变量名与对象的属性不一致的时候，可以起别名，比如下面给变量 f 起别名为 e</span>
<span class="token keyword">let</span> <span class="token punctuation">{</span><span class="token literal-property property">e</span> <span class="token operator">:</span> f<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">e</span> <span class="token operator">:</span> <span class="token string">&quot;eee&quot;</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>f<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 指定默认值 </span>
<span class="token keyword">let</span> <span class="token punctuation">{</span>x<span class="token punctuation">,</span> y <span class="token operator">=</span> <span class="token number">5</span><span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">x</span> <span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 方便地将现有对象的方法，赋值到某个变量</span>
<span class="token keyword">let</span> <span class="token punctuation">{</span>random<span class="token punctuation">}</span> <span class="token operator">=</span> Math<span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>random<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h4 id="_4-3-3-字符串解构赋值"><a href="#_4-3-3-字符串解构赋值" class="header-anchor">#</a> 4.3.3 字符串解构赋值</h4> <ul><li>字符串被转换成了一个类似数组的对象，可进行数组解构赋值；</li> <li>字符串对象都有一个 length 属性，可进行对象解构赋值。</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> <span class="token punctuation">[</span>a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">,</span> e<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'hello'</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d<span class="token punctuation">,</span> e<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> <span class="token punctuation">{</span>length<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token string">'hello'</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h2 id="五、js中的dom"><a href="#五、js中的dom" class="header-anchor">#</a> 五、JS中的DOM</h2> <h3 id="_5-1-dom-概述"><a href="#_5-1-dom-概述" class="header-anchor">#</a> 5.1 DOM 概述</h3> <p>DOM 是 Document Object Model 文档对象模型的缩写，是 W3C 组织制定的规范，把一个文档表示为一棵家谱树（父，子，兄弟）,定义了访问和操作 HTML 文档的标准方法，可动态地修改 XML 和 HTML。</p> <p><strong>DOM 树</strong>：节点（node）分层。文档节点（Document）、元素节点（Element）、属性节点（Attribute）;</p> <p><em><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/20240310235027.png" alt=""></em></p> <h3 id="_5-2-标签和属性操作"><a href="#_5-2-标签和属性操作" class="header-anchor">#</a> 5.2 标签和属性操作</h3> <p>根据 DOM 树结构，获取标签的 Element 对象需先获取文档对象，才能获取 Element 对象。</p> <h4 id="_5-2-1-document-变量"><a href="#_5-2-1-document-变量" class="header-anchor">#</a> 5.2.1 document 变量</h4> <p>document 是 js 中自定义好的文档对象，当浏览器加载 HTML 网页时自动创建，从上往下每解析一行标签则存入一行标签到 document 对象中。</p> <p><strong>注意</strong> 因为 HTML 是从上往下解析的，所以在  js 中使用 document 获取元素对象时需注意执行到获取代码时，标签是否已经加载到 document 对象中。</p> <h4 id="_5-2-2-window-onload-函数"><a href="#_5-2-2-window-onload-函数" class="header-anchor">#</a> 5.2.2 window.onload 函数</h4> <p>在 js 中有 window.onload 函数，浏览器在加载完 HTML 页面时会调用 onload 函数。所以我们可以把代码放到该函数中，当浏览器加载完 HTML 再执行。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
    window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token comment">// 操作标签</span>
    <span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h4 id="_5-2-3-元素对象获取"><a href="#_5-2-3-元素对象获取" class="header-anchor">#</a> 5.2.3_元素对象获取</h4> <ol><li><p>什么时候可以去获取元素？ 只有元素被加载到 document 中才可以获取</p></li> <li><p>如何去获取元素？学习 API</p></li></ol> <p><strong>元素获取 API</strong></p> <ol><li>通过元素 Id
getElementById，返回拥有指定 id 的第一个元素，如果不存在则返回 null</li> <li>通过标签名字
getElementsByTagName，返回一个包括所有给定标签名称的元素集合，如果没有匹配的元素，返回空集。</li> <li>通过 class 名字
getElementsByClassName，返回一个包含所有指定class名称的元素集合，可以在任意元素上调用该方法。</li></ol> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
		<span class="token comment">// 获取标签的 Element 对象，首先得先获取文档对象 docuemnt</span>
  	<span class="token comment">// 由于 document 中内容是从上往下存入的</span>
  	<span class="token comment">// 所以需要在页面加载完再执行获取标签的 Element 代码</span>
  	window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token comment">// 通过 id 获取 div 元素对象，id 在 html 中必须唯一</span>
      <span class="token keyword">var</span> divEl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;divId&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>divEl<span class="token punctuation">)</span><span class="token punctuation">;</span>
      
      <span class="token comment">// 通过标签名称获取元素对象，得到一个集合</span>
      ver divEls <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementByTagName</span><span class="token punctuation">(</span><span class="token string">&quot;div&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>divEls<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      
      <span class="token comment">// 通过 class 属性获取元素对象，得到一个集合</span>
      ver clzEls <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementByClassName</span><span class="token punctuation">(</span><span class="token string">&quot;clz&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>clzEls<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>divId<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>div1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>divId<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clz<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>div1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>http://www.baidu.com<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clz<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>百度<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><h3 id="_5-3-元素对象属性操作"><a href="#_5-3-元素对象属性操作" class="header-anchor">#</a> 5.3 元素对象属性操作</h3> <ul><li><p><strong>操作标准属性</strong></p> <p>获取属性值
元素对象.属性名
元素对象[“属性名”]
元素对象.getAttribute(&quot;属性名&quot;)</p> <p>设置属性值：
元素对象.属性名 = 值
元素对象[”属性名”] = 值
元素对象.setAttribute(&quot;属性名&quot;, 值)</p></li> <li><p><strong>操作自定义属性</strong></p> <p>获取属性值：
元素对象.getAttribute(&quot;属性名&quot;)</p> <p>设置属性值：
元素对象.setAttribute(&quot;属性名&quot;, 值)</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
        window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// 1 获取标签对象</span>
        <span class="token keyword">let</span> div1Id <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;div1Id&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// 2 操作属性(存&amp;&amp;取)</span>
        <span class="token comment">// 2.1 标准属性(内置的属性 id class style title)</span>
        <span class="token comment">// 2.1.1 普通的标准属性</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>div1Id<span class="token punctuation">.</span>id<span class="token punctuation">,</span> div1Id<span class="token punctuation">[</span><span class="token string">&quot;id&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>div1Id<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">&quot;id&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        div1Id<span class="token punctuation">.</span>id <span class="token operator">=</span> <span class="token string">&quot;newDivId1&quot;</span><span class="token punctuation">;</span>
        div1Id<span class="token punctuation">[</span><span class="token string">&quot;id&quot;</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">&quot;newDivId2&quot;</span><span class="token punctuation">;</span>
        div1Id<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">&quot;id&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;newDivId3&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token comment">// 2.1.2 特殊的标准属性</span>
        <span class="token comment">// 使用关键字,保留字（使用内置的别名）</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>div1Id<span class="token punctuation">.</span>className<span class="token punctuation">,</span>div1Id<span class="token punctuation">[</span><span class="token string">&quot;className&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>div1Id<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">&quot;class&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// 获取到的是样式对象（可以直接操作成员）</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>div1Id<span class="token punctuation">.</span>style<span class="token punctuation">)</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>div1Id<span class="token punctuation">[</span><span class="token string">&quot;style&quot;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// 获取到的是字符串，没办法直接操作成员</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>div1Id<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">&quot;style&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// 如果要单独获取样式中的某个样式，用对象的方式比较方便</span>
        <span class="token comment">// 属性带有特殊符号，不能直接用点的方式来操作（可以使用别名或[] 的方式来操作）</span>
        <span class="token comment">// 样式对象不存在 getAttribute，setAttribute 方法，只要元素对象有</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>div1Id<span class="token punctuation">.</span>style<span class="token punctuation">[</span><span class="token string">&quot;background-color&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>div1Id<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor<span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token comment">// 2.2 自定义属性 (只能使用 getter 和 setter 方法)</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>div1Id<span class="token punctuation">.</span>oo<span class="token punctuation">,</span> div1Id<span class="token punctuation">[</span><span class="token string">&quot;oo&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>div1Id<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">&quot;oo&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token comment">// 2.3 特殊属性：key=value(checked=&quot;checked&quot;,selected=&quot;selected&quot;)</span>
        <span class="token comment">// 值是 true 和 false，所以赋值时也只能用true 和 false，表示有无该属性</span>
        <span class="token keyword">let</span> checkEl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;checkId&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>checkEl<span class="token punctuation">.</span>checked<span class="token punctuation">,</span>checkEl<span class="token punctuation">[</span><span class="token string">'checked'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>checkEl<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">&quot;checked&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// checkEl.checked = false;</span>
        <span class="token comment">// 不能使用 getAttribute 和 setAttribute 来操作这类属性（无效）</span>
        checkEl<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">&quot;checked&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;sss&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br></div></div><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 元素 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">oo</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>xx<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>div1Id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>divClz<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>div1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkId<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div></li></ul> <h3 id="_5-4-node-对象的属性和方法"><a href="#_5-4-node-对象的属性和方法" class="header-anchor">#</a> 5.4_Node 对象的属性和方法</h3> <h4 id="_5-4-1-常用属性"><a href="#_5-4-1-常用属性" class="header-anchor">#</a> 5.4.1 常用属性</h4> <table><thead><tr><th>属性名</th> <th>描述</th></tr></thead> <tbody><tr><td>firstChild</td> <td>指向在子节点列表中的第一个节点</td></tr> <tr><td>lastChild</td> <td>指向在子节点列表中的最后一个节点</td></tr> <tr><td>childNodes</td> <td>所有子节点的列表</td></tr> <tr><td>previousSibling</td> <td>指向前一个兄弟节点,如果这个节点就是第一个,那么该值为null</td></tr> <tr><td>nextSibling</td> <td>指向后一个兄弟节点,如果这个节点就是最后一个,那么该值为nullsnoi</td></tr> <tr><td>parentNode</td> <td>父节点</td></tr></tbody></table> <p><em><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub/20240310235105.png" alt=""></em></p> <p>例子：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> parentEl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;parentId&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// 获取所有子节点</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>parentEl<span class="token punctuation">.</span>childNodes<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// 获取div1 和div3</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>parentEl<span class="token punctuation">.</span>firstChild<span class="token punctuation">.</span>nextSibling<span class="token punctuation">)</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>parentEl<span class="token punctuation">.</span>lastChild<span class="token punctuation">.</span>previousSibling<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// 获取父节点</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>parentEl<span class="token punctuation">.</span>lastChild<span class="token punctuation">.</span>parentNode<span class="token punctuation">,</span> parentEl<span class="token punctuation">.</span>firstChild<span class="token punctuation">.</span>parentNode<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>parentId<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>div1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>div2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>div3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h4 id="_5-4-2-常用方法"><a href="#_5-4-2-常用方法" class="header-anchor">#</a> 5.4.2 常用方法</h4> <table><thead><tr><th>方法名</th> <th>描述</th></tr></thead> <tbody><tr><td>hasChildNodes()</td> <td>是否包含子节点</td></tr> <tr><td>appendChild(node)</td> <td>将节点添加到子节点列表的末尾</td></tr> <tr><td>removeChild(node)</td> <td>从子节点中删除 node</td></tr> <tr><td>replaceChild(newNode,oldNode)</td> <td>替换子节点</td></tr> <tr><td>insertBefore(newNode,refNode)</td> <td>在一个子节点前插入一个新的子节点,在refNode元素前插入newNode</td></tr></tbody></table> <h3 id="_5-5-元素节点增删改案例"><a href="#_5-5-元素节点增删改案例" class="header-anchor">#</a> 5.5 元素节点增删改案例</h3> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>width=device-width, initial-scale=1.0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
        window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">let</span> parentNode <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;parentNode&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token comment">//创建一个新元素</span>
            <span class="token keyword">let</span> newDiv<span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&quot;div&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token comment">//设置新元素内容</span>
            newDiv<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">&quot;childNode4&quot;</span><span class="token punctuation">;</span>
            <span class="token comment">//追加新节点</span>
            <span class="token comment">//parentNode.appendChild(newDiv);</span>
            <span class="token comment">//获取id=&quot;childNode1&quot;的节点</span>
            <span class="token keyword">let</span> childNode1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;childNode1&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token comment">//删除节点</span>
            <span class="token comment">//parentNode.removeChild(childNode1);</span>
            <span class="token comment">//替换节点</span>
            <span class="token comment">//parentNode.replaceChild(newDiv,childNode1);</span>
            <span class="token comment">//指定位置插入节点</span>
            parentNode<span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span>newDiv<span class="token punctuation">,</span>childNode1<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>parentNode<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>childNode1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>childNode1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>childNode2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>childNode2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>childNode3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>childNode3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br></div></div><h2 id="六、事件驱动"><a href="#六、事件驱动" class="header-anchor">#</a> 六、事件驱动</h2> <p>所谓事件驱动，简单地说就是你在浏览器上怎么触碰标签(即产生什么事件)，浏览器执行什么操作(即调用什么函数)。当然事件不仅限于用户的操作，当对象处于某种状态时，可以发出一个消息通知，然后对这个消息感兴趣的程序就可以执行。</p> <p><strong>事件驱动编程的核心对象</strong></p> <ol><li><p><strong>事件源</strong>：谁发出的事件通知；也就是事件主体（通常指元素/标签）；</p></li> <li><p><strong>事件名称</strong>：发出什么通知的名称，比如：鼠标点击，我被别人<strong>点了一下</strong>；</p></li> <li><p><strong>事件响应函数</strong>：谁对这个这个事件感兴趣，当这个事件发生时要执行相应关联的函数；</p></li> <li><p>事件对象：</p> <p>一般来说，当事件发生时，会产生一个描述该事件的具体对象，包括具体的参数等一起发给响应函数，好让他们通过事件对象来了解事件更加详细的信息。</p></li></ol> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token comment">&lt;!--
	p元素是事件源
	click是事件名称
--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">color</span><span class="token punctuation">:</span> red</span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p1<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript"><span class="token function">shout</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>Hello world!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
	<span class="token comment">//响应函数</span>
	<span class="token keyword">function</span> <span class="token function">shout</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token comment">//响应函数，监听函数</span>
      <span class="token function">alert</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>clientX<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//e事件对象</span>
	<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="_6-1-事件类型-常见"><a href="#_6-1-事件类型-常见" class="header-anchor">#</a> 6.1 事件类型(常见)</h3> <h4 id="_6-1-1-鼠标事件"><a href="#_6-1-1-鼠标事件" class="header-anchor">#</a> 6.1.1 鼠标事件</h4> <table><thead><tr><th>属性</th> <th>描述</th></tr></thead> <tbody><tr><td>onclick</td> <td>当用户点击某个对象时调用的事件句柄</td></tr> <tr><td>ondblclick</td> <td>当用户双击某个对象时调用的事件句柄</td></tr> <tr><td>onmousedown</td> <td>鼠标按钮被按下</td></tr> <tr><td>onmouseup</td> <td>鼠标按键被松开</td></tr> <tr><td>onmouseleave</td> <td>当鼠标指针移出元素时触发</td></tr> <tr><td>onmousemove</td> <td>鼠标被移动</td></tr> <tr><td>onmouseover</td> <td>鼠标移到某元素之上</td></tr> <tr><td>onmouseout</td> <td>鼠标从某元素移开</td></tr></tbody></table> <h4 id="_6-1-2-键盘事件"><a href="#_6-1-2-键盘事件" class="header-anchor">#</a> 6.1.2 键盘事件</h4> <table><thead><tr><th>属性</th> <th>描述</th></tr></thead> <tbody><tr><td>onkeydown</td> <td>某个键盘按键被按下</td></tr> <tr><td>onkeypress</td> <td>某个键盘按键被按下并松开</td></tr> <tr><td>onkeyup</td> <td>某个键盘按键被松开</td></tr></tbody></table> <h4 id="_6-1-3-表单事件-form"><a href="#_6-1-3-表单事件-form" class="header-anchor">#</a> 6.1.3 表单事件 form</h4> <table><thead><tr><th>属性</th> <th>描述</th></tr></thead> <tbody><tr><td>onblur</td> <td>元素失去焦点时触发</td></tr> <tr><td>onchange</td> <td>该事件在表单元素的内容改变时触发</td></tr> <tr><td>onfocus</td> <td>元素获取焦点时触发</td></tr> <tr><td>onsubmit</td> <td>表单提交时触发</td></tr></tbody></table> <h3 id="_6-2-事件绑定的方法"><a href="#_6-2-事件绑定的方法" class="header-anchor">#</a> 6.2 事件绑定的方法</h3> <p>元素本身是不自带事件的, 如果需要给元素添加额外功能的时候, 需要先给其绑定上对应的事件, 然后用户触发元素对应的事件时,执行之前绑定好的响应函数，给元素绑定事件有三种方式。</p> <h4 id="_6-2-1-标签上使用-onxxx属性绑定"><a href="#_6-2-1-标签上使用-onxxx属性绑定" class="header-anchor">#</a> 6.2.1 标签上使用 onxxx属性绑定</h4> <p>xxx事件名称/类型.</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>点我啊<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript"><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'点我干啥?'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>该方式特别简单,但是缺点是 HTML 和 JS 交错在一起,维护性差.</p> <h4 id="_6-2-2-通过元素对象的事件属性绑定"><a href="#_6-2-2-通过元素对象的事件属性绑定" class="header-anchor">#</a> 6.2.2 通过元素对象的事件属性绑定</h4> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token comment">&lt;!--在该元素被加载完的时候没有绑定事件--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>点我啊<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//使用JS代码为元素绑定事件</span>
<span class="token keyword">let</span> btn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;btn&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
btn<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;点我干啥&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>这种方式,使得 HTML 和 JS 完全分离开来，便于后期维护,，推荐使用。</p> <p><font color="red">注意: 使用这种方式为元素绑定事件, 一定是要在元素被加载后,然后再执行上面的JS代码。</font></p> <h4 id="_6-2-3-通过元素对象的方法绑定事件"><a href="#_6-2-3-通过元素对象的方法绑定事件" class="header-anchor">#</a> 6.2.3 通过元素对象的方法绑定事件</h4> <p><strong>语法</strong>：
[Object].addEventListener(“name_of_event”, fnHandler);
name_of_event: 直接使用事件(操作)名称,没有on, 多次添加监听后,触发顺序: <strong>先添加的先执行</strong></p> <p>​		fnHandler: 事件响应函数</p> <p>​    [Object].removeEventListener(“name_of_event”, fnHandler);
​        fnHandler : 移除时,传入的&quot;事件响应函数&quot;,必须和添加时,传入的是同一个(通过相同标识符引用的那一个函数)
​        匿名函数,每次创建的都不同</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">let</span> btn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;btn&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 绑定事件</span>
    btn<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&quot;click&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;点我干啥?&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    btn<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&quot;click&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;又来,想si啊!&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>前面两种方式都存在一个小问题,不能为元素绑定多次相同的事件,因为是通过为事件属性赋值响应函数的方式来实现的,后面的赋值会将前面的覆盖掉.如果想要为元素绑定多次相同的事件,此时需要使用方式三。</p> <h4 id="_6-2-4-美女图片切换案例"><a href="#_6-2-4-美女图片切换案例" class="header-anchor">#</a> 6.2.4 美女图片切换案例</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">fun1</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 获取 img 标签对象</span>
    <span class="token keyword">let</span> imgEl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;image&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 修改src属性值</span>
    imgEl<span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token string">&quot;b.png&quot;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">fun2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">// 获取 img 标签对象</span>
    <span class="token keyword">let</span> imgEl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;image&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 修改src属性值</span>
    imgEl<span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token string">&quot;a.png&quot;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 使用js 来给事件源绑定事件</span>
    document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;image2&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function-variable function">onmouseover</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token string">&quot;b.png&quot;</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;image2&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function-variable function">onmouseout</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token string">&quot;a.png&quot;</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>image<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a.png<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">onmouseover</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript"><span class="token function">fun1</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">&quot;</span></span></span> <span class="token special-attr"><span class="token attr-name">onmouseout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript"><span class="token function">fun2</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>image2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a.png<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="_6-3-事件驱动-dom操作案例"><a href="#_6-3-事件驱动-dom操作案例" class="header-anchor">#</a> 6.3 事件驱动+DOM操作案例</h3> <p>完成 [资料/练习/DOM练习/index.html] 页面中的练习</p> <p><strong><img src="https://cdn.jsdelivr.net/gh/langfeiyes/images-khub//image-20200505235439171.png" alt="image-20200505235439171"></strong></p> <h2 id="七、小结与作业"><a href="#七、小结与作业" class="header-anchor">#</a> 七、小结与作业</h2> <h3 id="_7-1-小结"><a href="#_7-1-小结" class="header-anchor">#</a> 7.1 小结</h3> <ul><li>了解 ECMAScript 与 JavaScript 关系。</li> <li>掌握 Visual Studio Code 安装。</li> <li>熟练掌握 ES6 核心语法和进阶语法。</li> <li>了解 JS 中的 DOM 操作</li> <li>掌握 JS 的事件绑定和使用</li></ul> <h3 id="_7-2-作业"><a href="#_7-2-作业" class="header-anchor">#</a> 7.2 作业</h3> <ol><li>完成 ES6 核心语法练习</li> <li>完成 ES6 进阶语法练习</li> <li>完成 DOM 解析中 元素对象的获取</li> <li>完成 DOM 解析中 Node 元素节点增删改案例练习</li> <li>完成 事件绑定中图片切换案例练习</li> <li>完成资料中的练习题 check.html</li> <li>有时间可拓展其他练习题user.html/select.html</li></ol></div></div>  <div class="page-edit"><!----> <div class="tags"><a href="/tags/?tag=ES6" title="标签">#ES6</a></div> <!----></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/pages/de0eaa/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">SpringBoot</div></a> <a href="/pages/2288f1/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">异步请求-Ajax</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/pages/de0eaa/" class="prev">SpringBoot</a></span> <span class="next"><a href="/pages/2288f1/">异步请求-Ajax</a>→
      </span></p></div></div></div> <div class="article-list"><div class="article-title"><a href="/archives/" class="iconfont icon-bi">最近更新</a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><a href="/pages/0c07b2/"><div>
            IT杂货铺
            <!----></div></a> <span class="date">03-23</span></dt></dl><dl><dd>02</dd> <dt><a href="/pages/705b35/"><div>
            人事百问
            <!----></div></a> <span class="date">03-22</span></dt></dl><dl><dd>03</dd> <dt><a href="/pages/78eb56/"><div>
            MyBatis-Plus
            <!----></div></a> <span class="date">03-12</span></dt></dl> <dl><dd></dd> <dt><a href="/archives/" class="more">更多文章&gt;</a></dt></dl></div></div></main></div> <div class="footer"><div class="icons"><a href="mailto:langfeiyes@163.com" title="发邮件" target="_blank" class="iconfont icon-youjian"></a><a href="https://github.com/langfeiyes" title="GitHub" target="_blank" class="iconfont icon-github"></a><a href="https://music.163.com/#/playlist?id=755597173" title="听音乐" target="_blank" class="iconfont icon-erji"></a></div> 
  Theme by
  <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a> 
    | Copyright © 2024-2024
    <span><a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备18007927号-1</a></span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
          跟随系统
        </li><li class="iconfont icon-rijianmoshi">
          浅色模式
        </li><li class="iconfont icon-yejianmoshi">
          深色模式
        </li><li class="iconfont icon-yuedu">
          阅读模式
        </li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"><div></div></div></div>
    <script src="/assets/js/app.a2a00aa5.js" defer></script><script src="/assets/js/2.256f807a.js" defer></script><script src="/assets/js/54.dab741c7.js" defer></script>
  </body>
</html>
